<template>


	<view class="u-page">
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in room" :key="index">

				<view class="u-demo-block__content">
					<u-row justify="space-between" gutter="10">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">

								{{item.label}}添加人数
								{{item.id}}
							</view>
						</u-col>
						<u-col span="2">
							<view class="demo-layout bg-purple"></view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple-dark">
								<u-number-box v-model="item.value">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 50px;text-align: center;"
										class="input">{{ item.value}}
									</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-button type="primary" text="确定" @click="update(item)"></u-button>

			</u-list-item>
		</u-list>
	</view>





</template>

<script>
	export default {
		data() {
			return {
				room: []

			}
		},
		onLoad() {
			this.$axios.post("/yz/roomselect")
				.then((r) => {
					for (var i = 0; i < r.data.data.length; i++) {
						let temp = {
							value: r.data.data[i].peopleNum,
							label: r.data.data[i].roomNum,
							id:r.data.data[i].id
						}
						this.room.push(temp)
					}
					console.log(this.room)
				});
		}
		,methods: {
			update(item){
				console.log(item)
				
				this.$axios.post("/yz/roomupdate?id="+item.id+"&peopleNum="+item.value)
					.then((r) => {
						
					});
			
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: white;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
